// ignore_for_file: must_be_immutable

import 'package:flutter/material.dart';
/* 
Wrap组件
Wrap可以实现流布局，单行/列的Wrap跟Row、Column表现一致。
但Wrap组件可以自动换行

- direction           主轴的方向，默认水平
- alignment           主轴的对其方式
- spacing             主轴方向上的间距
- textDirection       文本方向
- verticalDirection   children摆放顺序，默认是down
- runAlignment        新的行或者列对齐方式
- runSpacing          新行列的间隙

*/

void main() {
  runApp(
      // 入口文件可以是自定义组件 也可以是flutter组件
      MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('Wrap组件'),
      ),
      body: MyApp(),
    ),
  ));
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(15),
      child: ListView(
        children: [
          Row(
            children: [
              Text(
                '热搜',
                style: Theme.of(context).textTheme.headlineMedium,
              )
            ],
          ),
          Divider(),
          Wrap(
            spacing: 10,
            runSpacing: 10,
            children: [
              MyButton(text: '女装'), // 传参
              MyButton(text: '笔记本'),
              MyButton(text: '手机'),
              MyButton(text: '玩具'),
              MyButton(text: 'iphone'),
              MyButton(text: 'flutter'),
              MyButton(text: 'vue'),
              MyButton(text: 'react'),
              MyButton(text: 'uniapp'),
            ],
          ),
          Row(
            children: [
              Text(
                "历史记录",
                style: Theme.of(context).textTheme.headlineMedium,
              )
            ],
          ),
          Divider(),
          Column(
            children: [
              ListTile(
                title: Text('女装'),
              ),
              Divider(),
              ListTile(
                title: Text('vue'),
              ),
              Divider(),
            ],
          ),
          Padding(
            padding: const EdgeInsets.all(20),
            child: OutlinedButton.icon(
                onPressed: () {},
                style: ButtonStyle(
                    foregroundColor: WidgetStateProperty.all(Colors.black38),  // 设置按钮颜色
                    side: WidgetStateProperty.all(BorderSide(width: 1 , color:Colors.black38)) // 设置边框颜色
                    ),
                    
                icon: const Icon(Icons.delete),
                label: const Text("清空历史记录")),
          )
        ],
      ),
    );
  }
}

class MyButton extends StatelessWidget {
  String text; // 接收参数
  void Function()? onPressed;

  MyButton({super.key, required this.text, this.onPressed});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      child: Text(text),
      style:
          ButtonStyle(backgroundColor: WidgetStateProperty.all(Colors.amber)),
    );
  }
}
